
<template>
    <div class="home">
      <div class="custom-nav" v-if="userInfo && userInfo.id && userInfo.role === 1" @click="toBack">
        <span style="margin-right: 12rpx">退出</span>
        <u-icon name="arrow-right" color="#fff" size="24"></u-icon>
      </div>
      <div class="top"></div>
      <div class="home-container">
        <div class="header">
          <div class="left-icon" @click="toCity">
            <u-icon name="map-fill" size="36"></u-icon>
            <span>{{ cityInfo.name }}</span>
          </div>
          <span>首页</span>
        </div>
        <div class="search-wrapper">
          <div class="search">
            <u-icon name="search" size="36"></u-icon>
            <div class="input-box">
              <input v-model="keyword" type="text" placeholder="搜索" />
            </div>
            <div class="search-btn" @click="getList">
              搜索
            </div>
          </div>
        </div>
        <div class="search-wrapper">
          <div class="tabs">
            <div :class="['tab-item', activeTab === item ? 'active' : '']" @click="changeType(item)" v-for="item in tabList">
              {{ item }}
            </div>
          </div>
<!--          <div class="menu-btn">-->
<!--            <image style="width: 38rpx;height: 48rpx" src="/static/home/menu-btn.png"></image>-->
<!--          </div>-->
        </div>
        <div class="dropdown-wrapper">
          <div class="dropdown-box">
            <u-dropdown @open="dropdownOpen" @close="dropdownClose" ref="areaRef" active-color="#05C8CE" in-active-color="#000000">
              <u-dropdown-item :title="activeStreet.label || activeArea.label || '区域'">
                <view class="slot-content" style="background-color: #FFFFFF;display: flex">
                  <div>
                    <scroll-view scroll-y="true" style="height: 400rpx;">
                      <view
                          @click="clickArea(item)"
                          v-for="item in [
                              ...areaList,
                          ]" :class="['area u-p-l-60 u-p-r-60 u-content-color u-m-t-20 u-m-b-20', item.id === activeArea.id ? 'active' : '']">{{ item.name }}</view>
                    </scroll-view>
                  </div>
                  <div style="flex-grow: 1;height: 100%;border-left: 1px solid #f2f2f2">
                    <scroll-view scroll-y="true" style="height: 400rpx;">
                      <view
                          @click="clickStreet(item)"
                          v-for="item in streetList" :class="['area2 u-p-l-60 u-p-r-60 u-content-color u-m-t-20 u-m-b-20', item.id === activeStreet.id ? 'active' : '']">{{ item.name }}</view>
                    </scroll-view>
                  </div>
                </view>

              </u-dropdown-item>
              <u-dropdown-item :title="activePost2.name || '职位'" :options="posList">
                <view class="slot-content" style="background-color: #FFFFFF;display: flex">
                  <div>
                    <scroll-view scroll-y="true" style="height: 400rpx;">
                      <view
                          @click="clickPost(item)"
                          v-for="item in posList" :class="['area u-p-l-60 u-p-r-60 u-content-color u-m-t-20 u-m-b-20', item.id === activePost.id ? 'active' : '']">{{ item.name }}</view>
                    </scroll-view>
                  </div>
                  <div style="flex-grow: 1;height: 100%;border-left: 1px solid #f2f2f2">
                    <scroll-view scroll-y="true" style="height: 400rpx;">
                      <view
                          @click="clickPost2(item)"
                          v-for="item in posList2" :class="['area2 u-p-l-60 u-p-r-60 u-content-color u-m-t-20 u-m-b-20', item.id === activePost2.id ? 'active' : '']">{{ item.name }}</view>
                    </scroll-view>
                  </div>
                </view>
              </u-dropdown-item>
              <u-dropdown-item v-model="dance" :title="danceName" :options="options2"></u-dropdown-item>
              <u-dropdown-item v-model="day" v-if="activeTab === '全职岗'" :options="options3" :title="dayName"></u-dropdown-item>
              <u-dropdown-item v-if="activeTab === '短期岗'" title="日期"></u-dropdown-item>
              <u-dropdown-item v-if="activeTab === '兼职岗'" title="日期">
              </u-dropdown-item>
              <u-dropdown-item v-if="activeTab === '时段岗'" v-model="value2" title="时段">
                <view class="slot-content" style="background-color: #FFFFFF;padding:20rpx 40rpx 40rpx 40rpx">
                  <div class="time-box">
                    <div class="time-item" @click="showTime1 = true">
                      {{ start_time || '开始时间' }}
                    </div>
                    <div style="margin: 0 24rpx">~</div>
                    <div class="time-item" @click="showTime2 = true">
                      {{ end_time || '结束时间'}}
                    </div>
                  </div>
                  <div class="week-list">
                    <div
                        @click="clickWeek(item)"
                        v-for="item in weekList" :class="['week-item', activeWeek.includes(item.id) ? 'active' : '']">{{ item.name }}
                    </div>
                  </div>
                  <div class="submit-list">
                    <div class="clear-btn" @click="clearWeek">清空</div>
                    <div class="submit-btn" @click="confirmWeek">确认</div>
                  </div>
                </view>
              </u-dropdown-item>
            </u-dropdown>
          </div>
        </div>
        <div class="list-view">
          <u-empty v-if="!dataList.length" text="暂无数据" mode="list"></u-empty>
          <scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 100%">
            <div class="list-item" v-for="(item,index) in dataListShow" :key="index">
              <div class="f-r j-b">
                <div class="title">{{ item.name }}</div>
                <div class="location f-r a-c">
                  <u-icon name="map-fill" size="28"></u-icon>
                  <div style="margin-left: 4rpx">{{ item.location }}km</div>
                </div>
              </div>
              <div class="line"></div>
              <div class="f-r a-c j-b">
                <div class="text">{{ item.user ? item.user.company_name : '' }}</div>
                <div :class="['button primary', item.disabled ? 'info' : '']" @click="toDetail(item)">查看详情</div>
              </div>
            </div>
            <u-loadmore v-if="dataList.length" :status="loading" />
          </scroll-view>
        </div>
      </div>

<!--      <u-calendar max-date="2099" @change="changeDate1" v-model="show1" mode="date" active-color="#fff" active-bg-color="#05C8CE"  range-color="#fff" range-bg-color="#05C8CE"></u-calendar>-->
<!--      <u-calendar @change="changeDate2" max-date="2050-12-31" v-model="show2" mode="range" active-color="#fff" active-bg-color="#05C8CE"  range-color="#fff" range-bg-color="#05C8CE"></u-calendar>-->
      <u-picker v-model="showTime1" mode="time" :params="params" confirm-color="#05C8CE" @confirm="confirmStartTime"></u-picker>
      <u-picker v-model="showTime2" mode="time" :params="params" confirm-color="#05C8CE" @confirm="confirmEndTime"></u-picker>
      <u-popup
          @close="closePopup"
          :mask-close-able="false"
          closeable
          mode="bottom" v-model="show1" border-radius="12">
        <div style="overflow:hidden;">
          <wu-calendar

              style="height: 440px"
              color="#05C8CE"
              :lunar="true"
              v-if="calendar1"
              :showMonth="false"
              :monthShowCurrentMont="false"
              :useToday="false"
              :date="endDate"
              ref="calendarRef1"
              :insert="true"
              @change="changeDate1"></wu-calendar>
          <div style="display: flex;align-items: center;padding-bottom: 20px;position:relative;z-index: 2">
            <div
                @click="resetDate1"
                class="button primary" type="primary" style="width: 45%;margin: 0 12px;text-align: center;height: 48px;line-height: 48px;border-radius: 24px;background: #999999">
              重置</div>
            <div
                @click="confirmDate1"
                class="button primary" type="primary" style="width: 45%;margin: 0 12px;text-align: center;height: 48px;line-height: 48px;border-radius: 24px">确认</div>
          </div>
        </div>
      </u-popup>
      <u-popup
          @close="closePopup"
          :mask-close-able="false"
          closeable
          mode="bottom" v-model="show2" border-radius="12">
        <wu-calendar
            style="height: 440px"
            color="#05C8CE"
            :lunar="true"
            mode="range"
            v-if="calendar2"
            :showMonth="false"
            :monthShowCurrentMont="false"
            :useToday="false"
            :date="[startDate2,endDate2].filter(item => item)" ref="calendarRef2" :insert="true" @change="changeDate2"></wu-calendar>
        <div style="display: flex;align-items: center;padding-bottom: 20px;position:relative;z-index: 2">
          <div
              @click="resetDate2"
              class="button primary" type="primary" style="width: 45%;margin: 0 12px;text-align: center;height: 48px;line-height: 48px;border-radius: 24px;background: #999999">重置</div>
          <div
              @click="confirmDate2"
              class="button primary" type="primary" style="width: 45%;margin: 0 12px;text-align: center;height: 48px;line-height: 48px;border-radius: 24px">确认</div>
        </div>
      </u-popup>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import mixin from "../../common/mixin";
export default {
  name: "index",
  mixins: [mixin],
  data() {
    return {
      keyword: '',
      tabList1: [],
      tabList: [],
      activeTab: '',
      show1: false,
      calendar1: true,
      show2: false,
      calendar2: true,
      startDateShow: '',
      endDateShow: '',
      startDate: '',
      endDate: '',
      startDateShow2: '',
      endDateShow2: '',
      startDate2: '',
      endDate2: '',
      showTime1: false,
      showTime2: false,
      params: {
        hour: true,
        minute: true
      },
      start_time: '',
      end_time: '',
      activeWeek: [],

      start_timeValue: '',
      end_timeValue: '',
      activeWeekValue: [],
      value2: '',
      options2: [
        {
          label: '不限',
          value: '',
        },
        {
          label: '3公里以内',
          value: 3,
        },
        {
          label: '5公里以内',
          value: 5,
        },
        {
          label: '10公里以内',
          value: 10,
        },
      ],
      // 距离
      dance: '',
      // 天数
      day: '',
      options3: [
        {
          label: '不限',
          value: '',
        },
        {
          label: '3天以内',
          value: 3,
        },
        {
          label: '5天以内',
          value: 5,
        },
        {
          label: '7天以内',
          value: 7,
        },
        {
          label: '14天以内',
          value: 14,
        },
      ],

      areaList: [
      ],
      activeArea: {},
      activeStreet: {},
      activePost: '',
      activePost2: '',
      posList: [

      ],
      weekList:[
        {
          name: '周一',
          id: 1,
        },
        {
          name: '周二',
          id: 2,
        },
        {
          name: '周三',
          id: 3,
        },
        {
          name: '周四',
          id: 4,
        },
        {
          name: '周五',
          id: 5
        },
        {
          name: '周六',
          id: 6
        },
        {
          name: '周日',
          id: 0
        }
      ],
    }
  },
  computed: {
    ...mapGetters(['cityInfo', 'userInfo']),
    // 街道列表
    streetList() {
      let findList = this.areaList.find(item => item.id === this.activeArea.id)?.children || []
      return [
        {
          id: '',
          name: '全部',
          label: ''
        },
          ...findList.map(item => {
            return {
              ...item,
              label: item.name
            }
          })
      ]
    },
    // 职位列表
    posList2() {
      return this.posList.find(item => item.id === this.activePost.id)?.children || []
    },
    dataListShow() {
      // location 小于 dance
      if (this.dance) {
        return this.dataList.filter(item => item.location <= this.dance)
      } else {
        return this.dataList
      }
    },
    danceName() {
      return this.options2.filter(item => item.value).find(item => item.value === this.dance)?.label || '距离'
    },
    dayName() {
      return this.options3.filter(item => item.value).find(item => item.value === this.day)?.label || '天数'
    }
  },
  onShow() {
    this.initData()
  },
  methods: {
    toBack() {
      uni.removeStorageSync('userInfo')
      this.$store.commit('setUserInfo', {})
      // 重载当前页面
      uni.reLaunch({
        url: '/pages/index/index'
      })
    },
    initData() {
      // 获取区域数据
      if (!this.cityInfo.name) {
        // 对话确认框
        uni.showModal({
          title: '提示',
          content: '请先选择城市',
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/city/city'
              })
            }
          }
        })
      }
      // 类型
      this.$api.getCategoryList({
      }).then(res => {
        this.tabList1 = res
        this.tabList = res.map(item => item.name)
        if (!this.activeTab) {
          this.activeTab = this.tabList[0]
        }
        this.getList()
      })
      // 获取岗位分类
      this.$api.getPostCategoryList({
        pid: 0
      }).then(res => {
        this.posList = res
        this.posList.forEach(item => {
          if (item.name === '不限') {
            item.id = ''
          }
          if (item.children) {
            item.children.forEach(sub => {
              if (sub.name === '不限') {
                sub.id = ''
              }
            })
          }
        })
      })
      this.$api.getCityList({
        pid: this.cityInfo.id
      }).then(res => {
        this.areaList = [
          {
            id: '',
            name: '全部',
            label: ''
          },
            ...res.map(item => {
              return {
                ...item,
                label: item.name
              }
            })
        ]
      })

    },
    getList() {
      console.log('请求了')
      if (!this.activeTab) return
      let address = `${this.cityInfo.name}${this.activeArea.label || ''}`
      if (this.activeArea.label !== this.activeStreet.label) {
        address += (this.activeStreet.label || '')
      }
      uni.showLoading({
        title: '加载中'
      })
      this.$api.getPostList({
        category: this.activeTab,
        post_category_id: this.activePost2.id,
        address,
        dance: this.dance,
        day: this.day,
        keyword: this.keyword,
        endDate: this.endDate,
        startDate2: this.startDate2,
        endDate2: this.endDate2,
        startTime: this.start_timeValue,
        endTime: this.end_timeValue,
        week: this.activeWeekValue
      }).then(res => {
        this.dataList = res.map(item => {
          return {
            ...item,
            location: 0
          }
        })
        this.getLocationKm()
      }).finally(() => {
        uni.hideLoading()
      })
    },
    dropdownClose(e) {
      console.log('关闭了',e)
      this.getList()
    },
    dropdownOpen(e) {
      console.log(e)
      if (e === 3) {
        if (this.activeTab === '兼职岗') {
          this.show1 = true
        } else if (this.activeTab === '短期岗') {
          this.show2 = true
        } else if (this.activeTab === '全职岗') {
          this.show3 = true
        } else if (this.activeTab === '时段岗') {
          this.show4 = true
        }
      }
    },
    toCity() {
      uni.navigateTo({
        url: '/pages/city/city'
      })
    },
    changeType(item) {
      if (this.activeTab === item) return
      this.activeTab = item
      this.$refs.areaRef.close();
      // this.getList()
    },
    closePopup() {
      this.$refs.areaRef.close();
    },
    clickArea(item) {
      this.activeArea = item
      this.$nextTick(() => {
        if (this.streetList.filter(item => item.label).length === 0) {
          this.activeStreet = {}
          this.$refs.areaRef.close();
        }
      })
    },
    clickStreet(item) {
      this.activeStreet = item
      this.$refs.areaRef.close();
    },
    clickWeek(item) {
      console.log('item',item)
      // 多选
      if (this.activeWeek.includes(item.id)) {
        this.activeWeek = this.activeWeek.filter(i => i !== item.id)
      } else {
        this.activeWeek.push(item.id)
      }
    },
    confirmWeek() {
      this.start_timeValue = this.start_time
      this.end_timeValue = this.end_time
      this.activeWeekValue = [
          ...this.activeWeek
      ]
      this.$refs.areaRef.close();
    },
    clearWeek() {
      this.start_time = ''
      this.end_time = ''
      this.activeWeek = []
    },
    clickPost(item) {
      this.activePost = item
    },
    clickPost2(item) {
      this.activePost2 = item
      this.$refs.areaRef.close();
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/postDetail/index?id=' + item.id
      })
    },


    Rad(d) { //根据经纬度判断距离
      return d * Math.PI / 180.0;
    },
    getDistance(lat1, lng1, lat2, lng2) {
      if (!lat1 || !lng1 || !lat2 || !lng2) {
        return '0'
      }
      if (lat1 == lat2 && lng1 == lng2) {
        return "0";
      }
      // lat1用户的纬度
      // lng1用户的经度
      // lat2技师的纬度
      // lng2技师的经度
      var radLat1 = this.Rad(lat1);
      var radLat2 = this.Rad(lat2);
      var a = radLat1 - radLat2;
      var b = this.Rad(lng1) - this.Rad(lng2);
      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137;
      s = Math.round(s * 10000) / 10000;
      s = s.toFixed(2) //保留两位小数
      console.log('经纬度计算的距离:' + s)
      return s
    },
    getLocationKm() {
      let _this = this
      uni.getLocation({
        type: 'wgs84',
        success: (_res) => {
          _this.dataList.forEach(item => {
            item.location = _this.getDistance(_res.latitude, _res.longitude, item.latitude, item.longitude)
          })
        },
        fail: (err) => {
          console.log(err)
        }
      })
    },
    changeDate1(e) {
      console.log(e)
      this.startDateShow = ''
      this.endDateShow = e.fulldate
    },
    resetDate1() {
      console.log('重置')
      this.calendar1 = false
      this.$nextTick(() => {
        this.calendar1 = true
      })
      this.changeDate1({
        fulldate: ''
      })
    },
    resetDate2() {
      console.log('重置')
      this.calendar2 = false
      this.$nextTick(() => {
        this.calendar2 = true
      })
      this.changeDate2({
        range: {
          before: '',
          after: ''
        }
      })
    },
    changeDate2(e) {
      console.log(e)
      this.startDateShow2 = e.range.before
      this.endDateShow2 = e.range.after
    },
    confirmDate1(e) {
      this.startDate = this.startDateShow
      this.endDate = this.endDateShow
      this.show1 = false
    },
    confirmDate2(e) {
      this.startDate2 = this.startDateShow2
      this.endDate2 = this.endDateShow2
      this.show2 = false
    },
    confirmStartTime(e) {
      console.log(e)
      this.start_time  = e.hour + ':' + e.minute
    },
    confirmEndTime(e) {
      console.log(e)
      this.end_time  = e.hour + ':' + e.minute
    },
  }
}
</script>

<style lang="scss">
.home {
  position: relative;
  height: 100%;
  .custom-nav {
    position: fixed;
    top: 50rpx;
    right: 30rpx;
    z-index: 9;
    height: 55rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F3F3F3;
  }

  .top {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    height: 522rpx;
    background: linear-gradient( 180deg, #05C8CE 0%, rgba(223,254,255,0.5) 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
}
.home-container {
  height: 100%;
  position: absolute;
  padding-top: 40rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 2;
  .list-item {
    background-color: #ffffff;
    padding: 40rpx;
    border-radius: 4rpx;
    margin-bottom: 36rpx;
    .title {
      height: 64rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 40rpx;
      color: #000000;
      line-height: 47rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .location {
      font-size: 24rpx;
      color: #666666;
    }
    .line {
      width: 70%;
      border: 1rpx solid #EDEDED;
      margin: 28rpx 0;
    }
    .f-r {
      display: flex;
    }
    .a-c {
      align-items: center;
    }
    .j-b {
      justify-content: space-between;
    }
    .button {
      height: 56rpx;
      padding: 0 36rpx;
      background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      line-height: 56rpx;
      color: #ffffff;
    }
    .button.info {
      background: #B6BDBD;
    }
    .text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #7B7B7B;
      line-height: 23rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .tag {
      padding: 0 24rpx;
      height: 34rpx;
      background: linear-gradient( 180deg, #05C8CE 0%, #25DADF 100%);
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      border: 1px solid #05C8CE;
      line-height: 30rpx;
      color: #ffffff;
      margin-right: 12rpx;
    }
    .tag2 {
      background-color: transparent !important;
      border: 1px solid #868686;
      color: #868686;
      font-size: 16rpx;
    }
  }
  .popup-content {
    padding: 32rpx;
  }
  .time-box {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    .time-item {
      width: 140rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border-radius: 4rpx;
      background: rgba(5,200,206,0.1);
      font-size: 24rpx;
    }
  }

  .week-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40rpx;
    .week-item {
      width: 96rpx;
      height: 52rpx;
      line-height: 48rpx;
      text-align: center;
      border-radius: 26rpx;
      background: #999999;
      color: #ffffff;
      border: 1px solid #999999;
      margin: 24rpx 24rpx 0 0;
    }
    .week-item.active {
      background: #05C8CE;
      border: 1px solid #05C8CE;
      color: #ffffff !important;
    }
  }
  .submit-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .clear-btn {
      height: 60rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 28rpx;
      color: #666666;
      line-height: 56rpx;
      text-align: center;
      background: #ffffff;
      border-radius: 26rpx;
      border: 1px solid #f2f2f2;
      width: 260rpx
    }
    .submit-btn {
      height: 60rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 28rpx;
      color: #FFFFFF;
      line-height: 56rpx;
      text-align: center;
      background: #05C8CE;
      border-radius: 26rpx;
      margin-left: 20rpx;
      border: 1px solid #05C8CE;
      flex-grow: 1;
    }
  }
  .list-view {
    flex-grow: 1;
    overflow: hidden;
    background: rgba(227, 233, 247, 0.18);
    padding:24rpx;
  }
  .menu-btn {
    margin-left: 20rpx;
  }
  .dropdown-wrapper {
    margin-top: 20rpx;
  }
  .dropdown-box {
    width: 100%;
    border-radius: 6rpx;
    background-color: #ffffff;
    .u-dropdown__menu__item {
      background-color: #ffffff;
      margin: 0 24rpx;
    }
    .area,.area2 {
      height: 52rpx;
      line-height: 52rpx;
      font-weight: 500;
      font-size: 24rpx;
    }
    .area {
      margin: 0 20rpx;
      &.active {
        color: #ffffff !important;
        background-color: #05C8CE;
      }
    }
    .active {
      color: #05C8CE;
    }
  }
  .search-wrapper {
    margin-top: 20rpx;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
  }
  .tabs {
    width: 100%;
    display: flex;
    align-items: center;
    .tab-item {
      flex: 1;
      height: 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #191919;
      line-height: 33rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .tab-item.active {
      height: 56rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 40rpx;
      color: #191919;
      line-height: 47rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10rpx;
        transform: translateX(-50%);
        width: 40rpx;
        height: 8rpx;
        background: #05C8CE;
        border-radius: 36rpx 36rpx 36rpx 36rpx;
      }
    }

  }
  .search {
    display: flex;
    align-items: center;
    height: 72rpx;
    width: 100%;
    background: #FFFFFF;
    padding: 0 8rpx 0 24rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,0,0,0.15);
    .input-box {
      flex-grow: 1;
      padding: 0 24rpx;
    }
    .search-btn {
      width: 142rpx;
      height: 60rpx;
      background: #05C8CE;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      line-height: 60rpx;
      text-align: center;
      color: #ffffff;
      font-size: 28rpx;
    }
  }
  .header {
    position: relative;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    background-color: transparent;
    font-size: 32rpx;
    color: #000000;
    .left-icon {
      position: absolute;
      left: 32rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
